/* ==========================================================================
   box-sizing
   ========================================================================== */

@mixin widget {
  .esri-widget {
    box-sizing: border-box;
    color: $text_color;
    font-size: $text_size;
    font-family: $font_family;
    line-height: $line_height;
    background-color: $background_color;
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
  }
  .esri-widget__anchor {
    text-decoration: none;
    color: $button_color;
    &:hover {
      color: $button_color--hover;
    }
    &--disabled {
      pointer-events: none;
      opacity: $disabled_opacity;
    }
  }
  .esri-widget__header {
    color: $header_color;
    font-weight: $text_weight_bold;
    margin: 0 0 0.5rem 0;
  }
  h1.esri-widget__header {
    font-size: $h1_text_size;
  }
  h2.esri-widget__header {
    font-size: $h2_text_size;
  }
  h3.esri-widget__header,
  h4.esri-widget__header,
  h5.esri-widget__header,
  h6.esri-widget__header {
    font-size: $lt_h2_text_size;
  }

  .esri-menu {
    position: absolute;
    top: $menu_placement;
    left: 0;
    z-index: 1;
    background-color: $background_color;
    @include defaultBoxShadow();
    padding: 0;
    margin: $menu_gap 0 0 0;
    font-size: 14px;
    line-height: 16px;
    -moz-background-clip: padding;
    background-clip: padding-box;
    overflow: hidden;
    width: 100%;
    visibility: hidden;
    max-height: 0;
    .esri-header {
      padding: 6px 12px;
      background-color: $background_inverse_color;
      color: $interactive_text_color--inverse;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      padding: 0.8em 1em;
      cursor: pointer;
      border-top: solid 1px $border_color;
    }
    li:first-child {
      border: none;
    }
    li:hover,
    li:focus {
      background-color: $background_hover_color;
    }
    li:active {
      background-color: $background_active_color;
      color: $active_text_color;
    }
    li [class^="esri-icon"] {
      padding-right: $text_size * 0.2;
    }
  }

  .esri-widget__table {
    color: $text_color;
    border: none;
    border-collapse: collapse;
    width: 100%;
    tr:nth-child(odd) {
      background-color: rgba($background_inverse_color, 0.1);
    }
    tr:nth-child(even) {
      background-color: rgba($background_inverse_color, 0.02);
    }
    tr {
      a {
        color: $text_color;
      }
      td,
      th {
        padding: 0.5em 0.7em;
        word-break: break-word;
        vertical-align: top;
        font-size: $body_text_size;
        font-weight: $text_weight_normal;
      }
      th {
        width: 50%;
        text-align: left;
        border-right: 3px solid rgba(0, 0, 0, 0.05);
      }
      td {
        width: 50%;
      }
    }
  }

  .esri-input {
    background-color: transparent;
    border: 1px solid $border_color;
    color: $text_color;
    font-family: inherit;
    font-size: $text_size;
    &[type="text"],
    &[type="number"] {
      height: $button_height;
      padding: 0 0.5em;
    }
    &::-ms-clear {
      display: none;
    }
    &::-moz-placeholder {
      color: $placeholder_color;
      opacity: 1;
    }
    &:-ms-input-placeholder {
      color: $placeholder_color;
    }
    &::-webkit-input-placeholder {
      color: $placeholder_color;
    }
  }

  .esri-button {
    align-items: center;
    background-color: $button_color;
    border: 1px solid $button_color;
    color: $button_color--inverse;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: $text_size;
    height: $button_height;
    justify-content: center;
    overflow: hidden;
    padding: 0 floor($side_spacing/2);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    &:hover {
      background-color: $button_color--hover;
      border: 1px solid $button_color--hover;
      color: $button_color--inverse;
    }
  }

  .esri-button--secondary {
    background-color: transparent;
    color: $button_color;
  }

  .esri-button--tertiary {
    background-color: transparent;
    border-color: transparent;
    color: $button_color;
    &:hover {
      background-color: transparent;
      border-color: transparent;
      color: $button_color--hover;
      text-decoration: underline;
    }
  }

  .esri-button--disabled {
    opacity: $disabled_opacity;
  }

  [class*="esri-icon"] {
    font-size: $icon_text_size;
  }

  .esri-widget__content--empty {
    align-items: center;
    color: $interactive_text_color;
    display: flex;
    flex-flow: column wrap;
    padding: $cap_spacing * 2 $side_spacing * 2;
    text-align: center;

    h1.esri-widget__header,
    h2.esri-widget__header,
    h3.esri-widget__header,
    h4.esri-widget__header,
    h5.esri-widget__header {
      font-weight: $text_weight_normal;
    }
  }

  .esri-widget__content-illustration--empty {
    padding: 1rem 0;
    width: 128px;
  }

  .esri-widget__content-icon--empty {
    padding: 0.5rem 0;
    width: 32px;
  }

  // Select
  $select_caret: "data:image/svg+xml,%3Csvg width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M11%2013l5%205.833L21%2013z%27%20fill%3D%27%23" +
    str-slice(#{$interactive_text_color}, 2) + "%27%20fill-rule%3D%27nonzero%27/%3E%3C/svg%3E";
  .esri-select {
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 0.85em;
    width: 100%;
    height: $button_height;
    color: $text_color;
    border: 1px solid $border_color;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    padding: 0 0.5em;
    background: url($select_caret) no-repeat right center $background_color;
  }

  .esri-select::-ms-expand {
    display: none;
  }

  // Disabled
  .esri-disabled a,
  .esri-disabled [class*="esri-icon"],
  .esri-disabled [role="menu"],
  .esri-disabled [role="checkbox"] {
    color: $disabled_color;
  }

  .keynav-mode {
    .esri-widget {
      //  Saving this for when we can toggle a key-nav class
      &:focus {
        @include outlineStyle();
      }
      * {
        &:focus {
          @include outlineStyle();
        }
      }
    }
  }

  /* ==========================================================================
   Loader
   ========================================================================== */
  .esri-widget__loader-animation {
    animation: esri-anim-rotate 1250ms infinite linear;
    transform: translateZ(0);
    border: 0.15em solid transparent;
    border-color: rgba($text_color, 0.8) $border_color $border_color $border_color;
    border-radius: 100%;
    display: block;
    font-size: $spinning_loader_size;
    height: 1em;
    width: 1em;
  }

  /* ==========================================================================
   Widget Button
   ========================================================================== */

  .esri-widget--button {
    font-size: $text_size;
    background-color: $background_color;
    color: $interactive_text_color;
    width: $button_width;
    height: $button_height;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    transition: background-color 125ms ease-in-out;
    &:hover {
      background-color: $background_hover_color;
      color: $interactive_text_color--hover;
    }
    &:active {
      background-color: $background_active_color;
      color: $active_text_color;
    }
  }

  /* ==========================================================================
   Components (top Widget node in esri-ui-corner)
   ========================================================================== */

  .esri-ui-corner {
    .esri-component {
      @include defaultBoxShadow();
    }
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-component.esri-widget--panel,
    .esri-component.esri-widget--panel-height-only {
      min-height: $panel_min_height;
      transition: max-height 250ms ease-in-out;
      overflow-y: auto;
    }
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-component.esri-widget--panel {
      width: $panel_width;
    }
  }

  // Max heights
  .esri-view-height-greater-than-medium {
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-ui-corner .esri-component.esri-widget--panel,
    .esri-ui-corner .esri-component.esri-widget--panel-height-only {
      max-height: $gt_medium_height;
    }
  }
  .esri-view-height-medium {
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-ui-corner .esri-component.esri-widget--panel,
    .esri-ui-corner .esri-component.esri-widget--panel-height-only {
      max-height: $medium_height;
    }
  }
  .esri-view-height-small {
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-ui-corner .esri-component.esri-widget--panel,
    .esri-ui-corner .esri-component.esri-widget--panel-height-only {
      max-height: $small_height;
    }
  }
  .esri-view-height-xsmall {
    .esri-expand .esri-widget--panel,
    .esri-expand .esri-widget--panel-height-only,
    .esri-ui-corner .esri-component.esri-widget--panel,
    .esri-ui-corner .esri-component.esri-widget--panel-height-only {
      max-height: $xsmall_height;
    }
  }

  .esri-ui-bottom-right,
  .esri-ui-bottom-left {
    .esri-menu {
      top: auto;
      bottom: $menu_placement;
      margin-top: 0;
      margin-bottom: $menu_gap;
    }
  }

  /* ==========================================================================
   RTL
   ========================================================================== */

  html[dir="rtl"] {
    .esri-widget__table {
      th {
        text-align: right;
        border-right: none;
        border-left: 3px solid rgba(0, 0, 0, 0.05);
      }
    }
    .esri-select {
      background-position: left 50%;
    }
    .esri-menu ul li [class^="esri-icon"] {
      padding-right: 0;
      padding-left: $text_size * 0.2;
    }
  }

  /* ==========================================================================
   accessibility
   ========================================================================== */

  .esri-icon-font-fallback-text {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
  }

  /* ==========================================================================
   animation
   ========================================================================== */

  [class^="esri-icon"] {
    // fixes IE11 bug where animation will continue after animation class is removed
    // https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/4784
    animation: none;
  }

  @keyframes esri-fade-in {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @include _loopingProgressBar($looping_progress_bar_width);

  .esri-rotating {
    animation: esri-anim-rotate 1250ms infinite linear;
    transform: translateZ(0);
  }

  @keyframes esri-anim-rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* ==========================================================================
   clearfixing
   ========================================================================== */

  /**
 * taken from http://nicolasgallagher.com/micro-clearfix-hack/
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

  .esri-clearfix {
    &:before,
    &:after {
      content: " ";
      /* 1 */
      display: table;
      /* 2 */
    }

    &:after {
      clear: both;
    }
  }

  /* ==========================================================================
   interaction
   ========================================================================== */

  .esri-interactive {
    cursor: pointer;
  }

  /* ==========================================================================
   visibility
   ========================================================================== */

  .esri-hidden {
    display: none !important;
  }

  .esri-invisible {
    visibility: hidden !important;
  }

  .esri-offscreen {
    position: absolute;
    top: -999em;
    left: -999em;
  }
}

@if $include_Widget == true {
  @include widget();
}
